<%--
  Created by IntelliJ IDEA.
  User: LH
  Date: 2021/10/29
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>添加住户信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <style>
        body{
            color: #E5DFD5;!important;
            background-color: rgba(255,255,255,0) !important;
        }
        .main{
            background-color: rgba(47,47,47,0.3) !important;
            display: flex;
            width: 42%;
            justify-content: center;
            align-items: center;
            border-radius: 10px 10px;
        }
        .all{
            margin-top: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        input[type="text"],input[type="tel"]{
            margin-top: 10px;
            margin-bottom: 10px;
            width: 100%;
            height: 40px;
            background-color: rgba(255,255,255,0.8);
            border: 1px;
            border-radius: 40px 40px;
            font-size: 15px;
            color: rgba(47,47,47,0.8);
            padding-left: 10px;
        }
        input[type="text"]:focus,input[type="tel"]:focus{
            outline: none;
        }
        input[type="text"]::placeholder,input[type="tel"]::placeholder{
            padding-left: 10px;
        }
        .username{
            margin-top: 20px;
        }
        h1{
            text-align: center;
        }
        button{
            background-color: rgba(47,47,47,0.5);
            color: #E5DFD5;
            border: 0px;
            height: 40px;
            width: 140px;
            border-radius: 5px 5px;
            margin-right: 5px;
            margin-left: 5px;
            margin-bottom: 25px;
        }
        button:hover{
            color: whitesmoke;
            background-color: rgba(47,47,47,0.3);
        }
        form{
            width: 60%;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="main">
        <form class="layui-form" action="${pageContext.request.contextPath}/userMessageChange" method="post">
            <h1>修改用户信息</h1>
            <div class="layui-form-item">
                <div class="layui-input-block">
                </div>
            </div>
            <div class="username">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入住户姓名" value="${userManage.username}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="userphone">
                <div class="layui-inline">
                    <label class="layui-form-label">住户手机号</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入住户手机号" value="${userManage.userPhoneNumber}"autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="userid">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="idNumber" lay-verify="identity" placeholder="请输入住户身份证号" value="${userManage.userIdNumber}"autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="roomnumber">
                <label class="layui-form-label">房号</label>
                <div class="layui-input-block">
                    <input type="text" name="roomNumber" lay-verify="identity" placeholder="请输入住户入住房间号" value="${userManage.roomNumber}" autocomplete="off" class="layui-input" onblur="checkRoomNumber(this)">
                </div>
            </div>
            <div class="layui-form-item">
                <div id="msg" style="height: 20px ;margin:20px auto 20px auto;; text-align: center" > ${msg}</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                </div>
            </div>

            <input id="id" type="hidden" name="id" value="${userManage.orderId}">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn"  lay-submit="" lay-filter="demo1">确认修改</button>

                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script>
    function checkRoomNumber(e) {
        let roomNumber = e.value;
        //发送ajax请求验证房间号是否存在且获得房间类型价格
        let xhr = new XMLHttpRequest();
        //open
        xhr.open("post","${pageContext.request.contextPath}/checkRoomNumber")
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("roomNumber="+roomNumber)
        xhr.onreadystatechange = function (){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("msg").innerText = xhr.responseText;
            }
        }
    }
</script>
